<template>
  <div id="app">
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <i class="el-icon-menu"  style="float: left;font-size: 30px;margin: 15px;"></i>
        <span style="float: left;font-size: 18px">教育部全国高校名单</span>
        <a @click="schoolSearch(1)" style="font-size: 13px">按高校查询</a>
        <span> | </span>
        <a @click="locationSearch"style="font-size: 13px">按地区查询</a>
      </el-header>

      <el-container>
        <el-aside width="auto">
          <div v-if="isSearch" class="schoolSearch">
            <div class="search">
              <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
              >
              </el-input>
            </div>
            <div class="butten">
              <el-button type="primary" @click="page"  style="width: 150px" >查询</el-button>
            </div>
            <div class="text">
              <div class="left">*</div>
              <div class="right">请输入关键词并点击查询</div>
            </div>
          </div>

          <el-menu v-else :default-openeds="['高校类型']">
            <el-submenu v-for="Menu in this.Menus" :index="Menu.name">
              <template slot="title">
                <i class="el-icon-plus"></i>
                {{Menu.name}}
              </template>
              <el-menu-item
                  v-for="item in Menu.children"
                  :class="currentTab == item?'is-active':''"
                  @click="tabClick(item,Menu.prop,Menu.api)"
              >
                {{item}}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <Table :title="currentTab" :data="currentData"/>
          <el-pagination
              v-if ="isSearch"
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              :total="tatal"
              :current-page ="currentPage"
              @current-change="schoolSearch">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Table from './components/Table.vue'
export default {
  name: 'app',
  data: function() {
    return{
      tatal:0,
      pageSize:50,
      currentPage:1,
      input: "",
      isSearch: false,
      currentTab: '一流大学',
      currentData:[],
      Menus: [
        {
          name:'高校类型',
          api:'type',
          prop:'type',
          children:[
            '一流大学',
            '一流学科',
            '985高校',
            '211高校'
          ]
        },
        {
          name:'所在地区',
          api:'province',
          prop:'pro',
          children:[
               "北京市",
               "四川省",
               "河北省",
               "天津市",
               "江苏省",
               "浙江省",
               "安徽省",
               "山西省",
               "内蒙古自治区",
               "辽宁省",
               "吉林省",
               "黑龙江省",
               "上海市",
               "福建省",
               "江西省",
               "山东省",
               "河南省",
               "湖北省",
               "湖南省",
               "广东省",
               "广西壮族自治区",
               "海南省",
               "重庆市",
               "贵州省",
               "云南省",
               "西藏自治区",
               "陕西省",
               "甘肃省",
               "青海省",
               "宁夏回族自治区",
               "新疆维吾尔自治区"
          ]
        }
      ]
    }
  },
  created() {
    this.request('http://localhost:8181/School/type?type=一流大学')
  },
  methods:{
    request: function (url){
      const _this = this
      axios.get(url).then(function (resp) {
        _this.currentData = resp.data
        // _this.tatal = resp.data.totalElements
      })
    },
    tabClick: function (tab, prop, api){
      this.currentTab = tab
      this.currentData = this.getData(prop,api)
    },
    getData: function (prop,api){
      this.request('http://localhost:8181/School/'+ api +'?'+ prop + '=' + this.currentTab)
    },
    schoolSearch:function (pageNum){
      this.currentPage = pageNum
      this.isSearch = true
      this.currentTab = '全国普通高等学校名单'
      this.page()
    },
    locationSearch:function(){
      this.isSearch = true
    },
    // searchData:function (name){
    //   debugger
    //   this.request('http://localhost:8181/School/name)
    // },
    // getAllData:function (currentPage){
    //   this.request('http://localhost:8181/School/FindAll/' + currentPage + '/' + this.pageSize)
    // },
    page: function () {
      // alert(currentPage)//分页
      debugger
      const _this = this
      axios.get('http://localhost:8181/School/name/' + this.currentPage + '/' + this.pageSize + '?name=' + this.input2).then(function (resp) {
        _this.currentData = resp.data.content
        _this.tatal = resp.data.totalElements
      })
    }
  },
  components: {
    Table
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.el-header {
  background-color: #9fbee7;
  color: #000000;
  line-height: 60px;
}

.el-aside {
  color: #333;
  display:inline;
}
a {
  color: blue;
  text-decoration: underline;
}
a:hover{
  color:cornflowerblue;
}

.schoolSearch {
  flex-direction: column;
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  margin-right: 5px;
  padding: 30px;
  box-shadow: 3px 3px 2px #e5e3e3;
  width: 160px;
  height: 150px;
}
.text {
  display: flex;
  font-size: 10px;
}
.left {
  color: red;
}
</style>
